<template>
    <div class="infoBox">
        <el-descriptions class="margin-top" :column="3" border :contentStyle="CS" :label-style="LS">
            <el-descriptions-item label="书名">

                {{ infoData.name }}
            </el-descriptions-item>

            <!-- 书籍封面图片展示 -->
            <el-descriptions-item label="书籍封面">

                <div class="demo-image__preview">
                    <el-image style="width: 100px; height: 100px" :src="infoData.url" :preview-src-list="srcList">
                    </el-image>
                </div>
            </el-descriptions-item>


            <!-- <el-descriptions-item label="书名">

                {{ infoData.name }}
            </el-descriptions-item> -->
            <el-descriptions-item label="书籍ID">

                {{ infoData.bookId }}
            </el-descriptions-item>
            <el-descriptions-item label="作者">

                {{ infoData.author }}
            </el-descriptions-item>
            <el-descriptions-item label="分类id">

                {{ infoData.categoryName }}
            </el-descriptions-item>

            <el-descriptions-item label="创建者">

                {{ infoData.createBy }}
            </el-descriptions-item>

            <el-descriptions-item label="创建时间">

                {{ infoData.createTime }}
            </el-descriptions-item>

            <el-descriptions-item label="介绍">

                {{ infoData.introduction }}
            </el-descriptions-item>

            <el-descriptions-item label="语言">

                {{ infoData.language }}
            </el-descriptions-item>

            <el-descriptions-item label="书籍位置">

                {{ infoData.location }}
            </el-descriptions-item>

            <el-descriptions-item label="数量">

                {{ infoData.number }}
            </el-descriptions-item>

            <el-descriptions-item label="价格">

                {{ infoData.price }}
            </el-descriptions-item>

            <el-descriptions-item label="出版社">

                {{ infoData.publish }}
            </el-descriptions-item>

            <!-- <el-descriptions-item label="备注">

                {{ infoData.remark }}
            </el-descriptions-item> -->

            <el-descriptions-item label="更新者">

                {{ infoData.updateBy }}
            </el-descriptions-item>


            <el-descriptions-item label="更新时间">

                {{ infoData.updateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="评分">

                <rate :detail="{ bookId: infoData.bookId }" :disabled="false"></rate>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>
import rate from '@/components/Rate/index.vue'
export default {
    name: 'infoTable',
    props: ['infoData'],
    components: {
        rate
    },
    data() {
        return {
            srcList: [
                this.infoData.url,
            ],
            // 描述列表样式调整
            CS: {
                // 'width':'800px',
                'text-align': 'center',  //文本居中
                'min-width': '130px',  //最小宽度
                // 'background-color': 'rgba(255, 97, 2, 0.1)',
                'word-break': 'break-all'  //过长时自动换行
            },
            LS: {
                'color': '#000',
                'text-align': 'center',
                'font-weight': '300',
                'min-width': '80px',
                'height': '40px',
                // 'background-color': 'rgba(255, 97, 2, 0.1)',
                'min-width': '100',
                'word-break': 'keep-all'
            }


        }
    },
}
</script>

<style scoped>
.infoBox {
    width: 100%;
    /* min-width: 700px; */
}
</style>
